<script setup>
import { getDXFList, saveDXF, deleteDXF } from '@/api';
import DxfImport from '@/components/common/dxfImport.vue';
import FloorOperationModal from '@/components/func/floorOperationModal.vue';
import { message } from 'ant-design-vue';

const searchText = ref('');

const columns = [
  {
    title: '文件名',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '最后修改时间',
    dataIndex: 'time',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
  },
];
const dataSource = [];
const mapModalVisible = ref(true);

const tableData = reactive({
  columns,
  dataSource,
  currentRowData: null
});
const isCheck = ref(false);
const selectedKeys = ref([]);
const containerRef = ref();

// 搜索
const searchHandle = () => {
  tableData.dataSource = tableData.dataSource.filter(item =>
    item.name.includes(searchText.value));
};

// 初始化表格
const initTable = () => {
  searchText.value = '';
  getDXFList().then(res => {
    if (res.code === 200) {
      tableData.dataSource = res.result;
    }
  });
};

// 预览
const onPreview = (record) => {
  // console.log('预览=== ', record);
  mapModalVisible.value = true;
  tableData.currentRowData = record;
};


// 删除
const onDelete = (record, index) => {
  deleteDXF(record.id).then(res => {
    if (res.code === 200) {
      message.success('删除成功');
      tableData.dataSource.splice(index, 1);
    }
  });

};

// 批量删除
const batchDelete = () => {
  deleteDXF(selectedKeys.value).then(res => {
    if (res.code === 200) {
      message.success('删除成功');
      tableData.dataSource = tableData.dataSource.filter(item =>
        !selectedKeys.value.includes(item.id));
      selectedKeys.value = [];
    }
  })
};

const rowSelection = {
  onChange: (selectedRowKeys) => {
    selectedKeys.value = selectedRowKeys;
  },
};

const saveMapData = () => {
  tableData.currentRowData = null;
  initTable();
};

watch(selectedKeys, (newValue) => {
  isCheck.value = newValue.length <= 0;
}, { immediate: true });

onMounted(() => {
  // initTable();
});
</script>

<template>
  <div class="wrapper-container" ref="containerRef">
          <floor-operation-modal v-model:visible="mapModalVisible" :parent-node="containerRef"
        :currentRowRecord="tableData.currentRowData" />
    <!-- <div class="header-wrapper">
      <div class="title-wrapper">
        <h2>平面图管理</h2>
      </div>
      <div class="header-body">
        <div class="search-wrapper">
          <a-input placeholder="请输入名称进行搜索" style="width: 220px" v-model:value="searchText" />
          <div class="btn">
            <a-button type="primary" @click="searchHandle">搜索</a-button>
            <a-button type="dashed" @click="initTable">重置</a-button>
            <a-popconfirm title="确定删除？删除后不可恢复，请谨慎操作！" ok-text="确定" cancel-text="取消" @confirm="batchDelete"
              :disabled="isCheck">
              <a-button type="primary" :disabled="isCheck" danger>删除</a-button>
            </a-popconfirm>
          </div>
        </div>
        <div class="btn">
          <dxf-import @save="saveMapData" />
        </div>
      </div>
    </div>
    <div class="content-wrapper">
      <a-table :columns="tableData.columns" :dataSource="tableData.dataSource" :row-selection="rowSelection"
        rowKey="id">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'action'">
            <div class="action">
              <a-button type="primary" @click="onPreview(record)">操作</a-button>
              <a-popconfirm title="确定删除？删除后不可恢复，请谨慎操作！" ok-text="确定" cancel-text="取消" @confirm="onDelete(record, index)">
                <a-button danger type="primary">删除</a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>

    </div> -->
  </div>
</template>

<style scoped>
.wrapper-container {
  width: 100%;
  height: 100%;
  padding: 15px 25px;
  box-sizing: border-box;

  .header-wrapper {
    margin-bottom: 5px;

    .header-body,
    .search-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;

      .btn {
        display: flex;
        gap: 10px;
      }
    }

  }

  .action {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center
  }

}
</style>
